<section class="sidebar">

    <!-- search form -->
    <form action="#" method="get" class="sidebar-form">
        <div class="input-group">
            <input type="text" name="q" class="form-control" placeholder="Search...">
            <span class="input-group-btn">
                <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
                </button>
            </span>
        </div>
    </form>
    <!-- /.search form -->

    <!-- sidebar menu -->
    <ul class="sidebar-menu">
        <li class="header">Personal</li>
        <li><a href="{% url 'example:index' %}"><i class="fa fa-home"></i> <span>Home</span></a></li>

        {% if user.is_authenticated %}
        <li class="treeview">
            <a href="#">
                <i class="fa fa-random"></i> <span>Processes</span>
                <span class="pull-right-container">
                    <i class="fa fa-angle-left pull-right"></i>
                </span>
            </a>
            <ul class="treeview-menu">
                <li><a href="{% url 'example:process_classes' %}"><i class="fa fa-dot-circle-o"></i>Available</a></li>
                <li><a href="{% url 'example:processes' %}?filter=-done"><i class="fa fa-circle"></i>In progress</a></li>
                <li><a href="{% url 'example:processes' %}?filter=done"><i class="fa fa-check-circle"></i>Completed</a></li>
            </ul>
        </li>
        {% endif %}
        {% if user.is_authenticated %}
        <li class="treeview">
            <a href="#">
                <i class="fa fa-tasks"></i> <span>My Tasks</span>
                <span class="pull-right-container">
                    <i class="fa fa-angle-left pull-right"></i>
                </span>
            </a>
            <ul class="treeview-menu">
                {% if perms.auth.can_approve %}
                <li>
                    <a href="{% url 'example:tasks_unassigned' %}">
                        <i class="fa fa-circle-o"></i>
                        Unassigned
                    </a>
                </li>
                {% endif %}
                <li>
                    <a href="{% url 'example:tasks_in_progress' %}">
                        <i class="fa fa-circle"></i>
                        In progress
                    </a>
                </li>
                <li>
                    <a href="{% url 'example:tasks_completed' %}">
                        <i class="fa fa-check-circle"></i>
                        Completed
                    </a>
                </li>
            </ul>
        </li>
        {% endif %}
        {% if user.is_authenticated %}
        <li class="header">Browse</li>
        <li><a href="{% url 'example:timesheets' %}"><i class="glyphicon glyphicon-time"></i> <span>Timesheets</span></a></li>
        <li><a href="{% url 'example:vacations' %}"><i class="glyphicon glyphicon-plane"></i> <span>Vacations</span></a></li>
        {% endif %}
        <li class="header">Other</li>
        <li><a href="#"><i class="fa fa-question-circle"></i> <span>Help</span></a></li>
    </ul>
</section>
